<template>
  <div>
    <div class="page-content-forms">
        <a-space>
            <div>
                <label>资产类型：</label>
                <a-select style="width: 220px" @change="assets_type_Change" allowClear v-model="assets_type">
                    <a-select-option :value="item.name" v-for="(item,index) in assets_types" :key="index" >{{item.name}}</a-select-option>
                </a-select>
            </div>
            <div >
                <label>持有姓名：</label>
                <a-select style="width: 220px" @change="assets_user_Change" allowClear v-model="assets_user">
                    <a-select-option :value="item.fullname" v-for="(item,index) in assets_users" :key="index" >{{item.fullname}}</a-select-option>
                </a-select>
            </div>
            <div >
              <a-button type="primary" @click="ClickSearch" >查询</a-button>
            </div>
            <div >
              <a-button type="primary" @click="AddAsset" >添加</a-button>
            </div>
        </a-space>
    </div>
    <div class="page-content-table">
        <a-table :columns="columns" :data-source="table_data" bordered :pagination="task_pagination"  size="small"
        @change="changeEvent"
        @expand="expandEvent"
        >
        <p slot="expandedRowRender" slot-scope="record" style="margin: 0">
          <a-descriptions title="其他信息" bordered="true" size="small"> 
            <a-descriptions-item label="GUID" :span="3">{{record.uid}}</a-descriptions-item>
            <a-descriptions-item label="备注信息" :span="3">{{record.info}}</a-descriptions-item>
          </a-descriptions>
          <a-table 
          :columns="tasks_columns_older" 
          :data-source="table_data_older" bordered 
          size="small"
          v-show="table_data_older.length>0"
          >
          <span slot="owner" slot-scope="text2, record2"> 
              <span class="menu-name">{{record2.owner}}</span>
            </span>
            <span slot="stime" slot-scope="text2, record2"> 
              <span class="menu-name">{{GetTime(record2.stime)}}</span>
            </span>
            <span slot="etime" slot-scope="text2, record2"> 
              <span class="menu-name">{{GetTime(record2.etime)}}</span>
            </span>
          </a-table>
        </p>
            <span slot="name" slot-scope="text, record"> 
              <span class="menu-name">{{record.utime}}</span>
            </span>
            <span slot="assetid" slot-scope="text, record"> 
              <span class="menu-name">{{record.assetid}}</span>
            </span>
            <span slot="owner" slot-scope="text, record"> 
              <span class="menu-name">{{record.owner}}</span>
            </span>
            <span slot="type2" slot-scope="text, record"> 
              <span class="menu-name">{{record.type}}</span>
            </span>
            <span slot="stime" slot-scope="text, record"> 
              <span class="menu-name">{{GetTime(record.stime)}}</span>
            </span>
            <span slot="etime" slot-scope="text, record"> 
              <span class="menu-name">{{GetTime(record.etime)}}</span>
            </span>
            <span slot="operation" slot-scope="text, record">
            <a-dropdown :trigger="['click']" >
                    <p class="header-right-name ant-dropdown-trigger" @click="e => e.preventDefault()" style="cursor: pointer;">操作</p>
                    <a-menu slot="overlay" >
                        <a-menu-item key="info">
                          <a-button type="link"  @click="update_info(record)">更新备注信息</a-button>
                        </a-menu-item>
                        <a-menu-item key="owner">
                          <a-button type="link"  @click="update_owner(record)">更新持有人</a-button>
                        </a-menu-item>
                        <a-menu-item key="delete">
                          <a-button type="link">
                            <a-popconfirm
                            title="确定要删除该设备吗？"
                            ok-text="删除"
                            cancel-text="取消"
                            @confirm="delete_asset(record)"
                            >
                              <a href="#">删除设备</a>
                          </a-popconfirm>
                          </a-button>
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>
            </span>
        </a-table>
    </div>
    <a-modal v-model="addAsset_visible" title="添加设备" 
      @ok="addAsset_ok"
      :maskClosable="false"
      okText="添加"
      okType="dashed"
      :destroyOnClose="true"
      cancelText='取消'
      cancelokType="dashed"
      @cancel="addAsset_cancle"
    >
    <a-row>
      <a-form :form="form" :label-col="{ span:6 }" :wrapper-col="{ span: 18 }">
          <a-form-item label="GUID">
          <a-input  v-decorator="['uid', { rules: [{ required: false, message: '资产名称!' }] }]" disable/> 
        </a-form-item>
        <a-form-item label="资产名称">
          <a-input  v-decorator="['name', { rules: [{ required: true, message: '资产名称!' }] }]"/> 
        </a-form-item>
        <a-form-item label="资产类型">
          <a-select style="width: 220px" allowClear v-decorator="['type', { rules: [{ required: true, message: '资产类型!' }] }]">
              <a-select-option :value="item.name" v-for="(item,index) in assets_types" :key="index" >{{item.name}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="持有人">
          <a-select style="width: 220px" allowClear v-decorator="['owner', { rules: [{ required: false, message: '持有人!' }] }]">
            <a-select-option :value="item.fullname" v-for="(item,index) in assets_users" :key="index" >{{item.fullname}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="设备ID">
          <a-input  v-decorator="['assetid', { rules: [{ required: true, message: '设备ID!' }] }]"/> 
        </a-form-item>
        <a-form-item label="备注信息">
          <a-textarea  placeholder="请填写备注信息,如CPU、内存等"   v-decorator="['info', { rules: [{ required: true, message: '备注信息!' }] }]"  :autoSize ="{ minRows: 4 }" allow-clear @change="change_data"></a-textarea >
        </a-form-item>
      </a-form>
    </a-row>
    </a-modal>
    <a-modal v-model="update_info_visible" title="更新备注信息" 
      @ok="update_info_ok"
      :maskClosable="false"
      okText="更新"
      okType="dashed"
      :destroyOnClose="true"
      cancelText='取消'
      cancelokType="dashed"
      @cancel="update_info_cancle"
      >
      <a-row>
        <span >资产uid:{{activeAsset.uid}}</span>
      </a-row>
       <a-row style="margin-top: 20px;">
       <a-textarea  placeholder="请填写备注信息,如CPU、内存等"  v-model="update_info_info" :autoSize ="{ minRows: 4 }" allow-clear ></a-textarea >
      </a-row>
    </a-modal>
    <a-modal v-model="update_owner_visible" title="更新持有人" 
      @ok="update_owner_ok"
      :maskClosable="false"
      okText="更新"
      okType="dashed"
      :destroyOnClose="true"
      cancelText='取消'
      cancelokType="dashed"
      @cancel="update_owner_cancle"
      >
      <a-row>
        <span >资产uid:{{activeAsset.uid}}</span>
      </a-row>
      <a-row style="margin-top: 20px;">
        <a-select style="width: 320px" allowClear v-model="update_info_user" mode="tags" >
            <a-select-option :value="item.fullname" v-for="(item,index) in assets_users" :key="index" >{{item.fullname}}</a-select-option>
          </a-select>
      </a-row>
    </a-modal>
  </div>
</template>
<script>
const tasks_columns =[
  {
    title: '资产名称',
    dataIndex: 'name',
    key: 'id',
    width:300,
    align:'center'
  },
  {
    title: '设备ID',
    dataIndex: 'assetid',
    key: 'id',
    width:300,
    align:'center'
  },

  
  {
    title: '持有人',
    dataIndex: 'owner',
    key: 'id',
    width:210,
    align:'center'
  },
  {
    title: '类型',
    scopedSlots: { customRender: 'type2' } ,
    key: 'id',
    width:150,
    align:'center'
  },
  {
    title: '持有开始时间',
    scopedSlots: { customRender: 'stime' } ,
    key: 'id',
    width:210,
    align:'center'
  },
  {
    title: '持有结束时间',
    scopedSlots: { customRender: 'etime' } ,
    key: 'id',
    width:210,
    align:'center'
  },
  {
    title: '操作',
    key: 'taskid',
    scopedSlots: { customRender: 'operation' },
    align:'center'
  },
]
const tasks_columns_older =[
  {
    title: '持有人',
    dataIndex: 'owner',
    key: 'key',
    width:210,
    align:'center'
  },
  {
    title: '持有开始时间',
    scopedSlots: { customRender: 'stime' } ,
    key: 'key',
    width:210,
    align:'center'
  },
  {
    title: '持有结束时间',
    scopedSlots: { customRender: 'etime' } ,
    key: 'key',
    width:210,
    align:'center',
  },
]
export default {
  data() {
    return {
        assets_types:[],
        assets_users:[],
        assets_type:'',
        assets_user:'',
        columns:tasks_columns,
        task_pagination:{
          size:'small',
          pageSize:15,
          total:0,
          showTotal:(total, range)=>{
            return `共 ${total} 个，当前${range[0]}-${range[1]}`
          },
          ucurrent:1,
        },
        table_data:[],
        addAsset_visible:false,
        form: this.$form.createForm(this, { name: 'form' }),

        table_data_older:[],
        tasks_columns_older:tasks_columns_older,


        activeAsset:{},
        update_info_visible:false,
        update_info_info:'',
        update_owner_visible:false,
        update_info_user:''
    }
  },
  mounted() {
    this.Get_assets_types();
    this.Get_assets_users();
  },
  methods: {
    Get_assets_types(){
      this.$common_apis.axios_get("/get_assets_types?").then(result => {
        if(result){
          this.assets_types=result
        }
      });
    },
    Get_assets_users(){
      this.$user.get_user_by_role().then((res) => {
        if (res) {
          this.assets_users =res
        }
      });
    },
    ClickSearch(){
      this.search();
    },
    assets_type_Change(){
      this.search();
    },
    assets_user_Change(){
      this.search();
    },
    search(pagenum=1){
      this.table_data=[]
       let qs={
        pagesize:this.task_pagination.pageSize,
        pagenum,
        type:this.assets_type,
        owner:this.assets_user,
      }
      this.$common_apis.axios_get("/get_assets?",qs,true).then(result => {
        if(result){
          let _data=result.data
          _data.forEach((_featrue,index)=>{
            _featrue.key=index
          })
          this.table_data=_data
          this.task_pagination.total=result.page.count
        }
      });
    },
    changeEvent(pagination){
      this.search(pagination.current)
      this.task_pagination.ucurrent=pagination.current
    },
    expandEvent(expanded, record){
      if(expanded==true){
        if(record.older){
          let table_data_older=record.older
          table_data_older.forEach((_featrue,index)=>{
            _featrue.key=index
          })
          table_data_older.sort((a,b)=>{
            return b.etime -a.etime
          })
          this.table_data_older=table_data_older
          return
        }
      }
      this.table_data_older=[]
    },
    async AddAsset(){
      this.addAsset_visible=true
      let uid=await this.$common_apis.axios_get("/guid?");
      this.form.setFieldsValue({
        uid: uid,
      });
      let WaitAddAsset =new Promise((resolve)=>{this.AddAsset_resolve=resolve;});
      let _WaitAddAsset=await WaitAddAsset
      if(_WaitAddAsset){
        this.$common_apis.axios_post("/add_assets?",_WaitAddAsset,true)
        .then(res => {
          if (res) {
            this.search(this.task_pagination.ucurrent);
          }
        });
        return true
      }
      return false
    },
    addAsset_ok(){
      this.form.validateFields((err, values) => {
        if (!err) {
          this.AddAsset_resolve(values);
          this.addAsset_visible=false
        }
        else{
          this.$message.info('完整填写信息');
        }
      });
    },
    addAsset_cancle(){
      this.addAsset_visible=false
      this.AddAsset_resolve(false);
    },
    async update_info(record){
      this.activeAsset=record
      this.update_info_info=record.info
      this.update_info_visible=true
      let Wait_update_info_resolve =new Promise((resolve)=>{this.update_info_resolve=resolve;});
      let _Wait_update_info_resolve=await Wait_update_info_resolve
      if(_Wait_update_info_resolve){
        if(this.update_info_info==record.info){
          this.$message.info('与前备注信息一致!');return
        }
        this.$common_apis.axios_post("/update_assets?",{
          uid:record.uid,
          info:this.update_info_info
        },true)
        .then(res => {
          if (res) {
            this.search(this.task_pagination.ucurrent);
          }
        });
        return true
      }
      return false

    },
    update_info_ok(){
      if(this.update_info_info==''){
        this.$message.info('请填写新的备注信息');
      }
      else{
        this.update_info_resolve(true);
        this.update_info_visible=false
      }
    },
    update_info_cancle(){
      this.update_info_visible=false
      this.update_info_resolve(false);
    },
    async update_owner(record){
      this.activeAsset=record
      this.update_info_user=record.owner
      this.update_owner_visible=true
      let Wait_update_owner_resolve =new Promise((resolve)=>{this.update_owner_resolve=resolve;});
      let _Wait_update_owner_resolve=await Wait_update_owner_resolve
      if(_Wait_update_owner_resolve){
        if(this.update_info_user==record.owner){
          this.$message.info('与前持有人一致!');return
        }
        this.$common_apis.axios_post("/update_assets?",{
          uid:record.uid,
          owner:this.update_info_user
        },true)
        .then(res => {
          if (res) {
            this.search(this.task_pagination.ucurrent);
          }
        });
        return true
      }
      return false

    },
    update_owner_ok(){
      if(this.update_info_user.length==0 ){
        this.$message.info('请填写持有人');
      }
      else if(this.update_info_user.length>1 ){
        this.$message.info('只能填写一个持有人');
      }
      else{
        this.update_info_user=this.update_info_user[0]
        this.update_owner_resolve(true);
        this.update_owner_visible=false
      }
    },
    update_owner_cancle(){
      this.update_owner_visible=false
      this.update_owner_resolve(false);
    },
    delete_asset(record){
      this.$common_apis.axios_post("/delete_assets?",{
        uid:record.uid,
      },true)
      .then(res => {
        if (res) {
          this.search(this.task_pagination.ucurrent);
        }
      });
    },
  },
}
</script>